<template>
  <div class="classify">
    <h2>分类</h2>
    <ul>
      <li v-for="i in classifyList" :key="i.id" @click="getMore(i.id)">
        <i class="el-icon-folder-opened"></i>
        <span>{{ i.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { classify } from "../../../units/api";
export default {
  data() {
    return {
      classifyList: [],
    };
  },
  created() {
    this.getListAPI();
  },
  methods: {
    async getListAPI() {
      let res = await classify({ current: 1, size: 20 });
      // console.log(res, "这里是classify");
      this.classifyList = structuredClone(res.data.data);
    },
    getMore(id) {
      this.$router.push({
        name: "classmore",
        params: {
          id,
        },
      });
      console.log(id, "传入数据");
    },
  },
};
</script>

<style scoped lang="scss">
.classify {
  background-color: rgb(255, 255, 255);
  padding: 10px;
  text-align: left;
  h2 {
    height: 30px;
    padding: 0;
    margin: 0;
    line-height: normal;
  }
  ul {
    line-height: 46px;
    padding: 10px;

    li {
      list-style: none;
      font-size: 20px;
      color: #666;
      cursor: pointer;
      border-radius: 10px;
      span {
        margin-left: 10px;
      }
      &:hover {
        background-color: #f5f5f5;
      }
      &:hover span {
        color: rgb(9, 9, 255);
      }
    }
  }
}
</style>